<template>
	<view class="indexBanner">
		<!-- 广告区域 -->
		<view class="ad-wrap" v-for="item in list" :key="item.id">
			<image 
				:src="item.img" 
				@tap="jumpByPageType(item.url)" 
				mode="scaleToFill"
			></image>
		</view>
	</view>
</template>

<script>	
	import { mapState } from 'vuex';
	import { links } from '../../common/mixins.js'
	
	export default {
		name: 'indexBanner',
		mixins: [ links ],
		props: {
			theData: {
				type: Array,
				required: true
			}
		},
		computed: {
			...mapState ([
				'debugSetting' // 将 this.debugSetting 映射为 this.$store.state.debugSetting
			]),
			list() {
				let list = JSON.parse(JSON.stringify(this.theData));
				return list.map((item) => {
					let {
						id: id,
						img: img,
						url: url,
						...rest
					} = item;
					img = this.debugSetting.resourcePath + img;
					return { id, img, url, rest};
				});
			},
		},
	}
</script>

<style lang="scss">
	.indexBanner {
		.ad-wrap{
			width: 100%;
			height: 210upx;
			padding: 10upx 0;
			background: #fff;
			image{
				width:100%;
				height: 100%; 
			}
		}
	}
</style>
